<template>
  <v-card class="mx-auto">
    <v-data-table
            :headers="headers"
            :items="data_list"
            hide-default-footer
            sort-by="projectName"
            class="elevation-1">

      <!--新增按钮及新增修改弹出框-->
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn color="primary"
                     dark
                     class="mb-2"
                     v-bind="attrs"
                     v-on="on">新增项目分类</v-btn>
            </template>

            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-container>
                  <v-form ref="dialogForm" v-model="dialogValid">
                      <v-text-field v-model="editedItem.projectName"
                                    :rules="projectNameRules"
                                    label="项目名称"></v-text-field>

                      <v-text-field v-model="editedItem.projectPath"
                                    label="项目本地磁盘路径"></v-text-field>
                  </v-form>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close">取消</v-btn>
                <v-btn color="blue darken-1"  @click="save">保存</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <!--每一行后面的操作按钮 -->
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </template>

      <template v-slot:no-data>
        <v-card-text>请添加数据</v-card-text>
      </template>


    </v-data-table>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: '项目名称',
          align: 'start',
          sortable: false,
          value: 'projectName',
        },
        { text: '项目本地磁盘路径', value: 'projectPath' },
        { text: '操作', value: 'actions', sortable: false },
      ],
      data_list: [],
      data_collection:'project_config',
      editedId: '', //默认新增数据，新增数据没有id
      editedItem: {
        id: '',
        projectName: '',
        projectPath: ''
      },
      defaultItem: {
        id: '',
        projectName: '',
        projectPath: ''
      },
      dialogValid: true,
      projectNameRules:[
        value => !!value || '请填写数据库名,不能为空',
      ],
    }),

    computed: {
      formTitle () {
        return this.editedId === '' ? '新增数据项' : '修改数据项'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.data_list = this.$db.get(this.data_collection).value()
      },

      editItem (item) {
        this.editedId = item.id
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {

        confirm('您确定要删除 ' + item.projectName + '么?')
        && this.$db.get(this.data_collection)
                .removeById(item.id)
                .write()
        this.data_list = this.$db.get(this.data_collection).value()

      },

      close () {
        this.dialog = false
        this.$nextTick(() => {
          this.$refs.dialogForm.resetValidation()
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedId = ''
        })
      },

      save () {
        if (this.editedId !== '') { //修改数据
          this.$db.read().get(this.data_collection)
                  .find({ id: this.editedId })
                  .assign(this.editedItem)
                  .write()
          this.data_list = this.$db.get(this.data_collection).value()
        } else { //新增数据
          this.data_list.push(this.editedItem)
          this.$db.read().get(this.data_collection).insert(this.editedItem).write()
        }
        this.close()
      },
    },
  }
</script>
